<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <my-bread-crumb>评论管理</my-bread-crumb>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" height="430px" v-loading="isDisabled">
        <el-table-column prop="title" label="文章标题"> </el-table-column>
        <el-table-column prop="total_comment_count" label="评论总数"> </el-table-column>
        <el-table-column prop="fans_comment_count" label="粉丝评论数"> </el-table-column>
        <el-table-column label="评论状态" width="180">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.comment_status===true" type="success">正常</el-tag>
            <el-tag size="medium" v-if="scope.row.comment_status===false" type="info">已关闭</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.comment_status" active-color="#13ce66" @change="commentStatusFn(scope.row)" :disabled="isDisabled">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000" @current-change="pageFn"
        :disabled="isDisabled">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data: function () {
    return {
      tableData: [],
      totalCount: 0, // 文章总数
      isDisabled: false
    }
  },
  mounted () {
    this.commentFn(1)
  },
  methods: {
    async commentFn (page) {
      await this.$axios.get('/mp/v1_0/articles', {
        params: {
          page: page,
          response_type: 'comment'
        }
      }).then(res => {
        this.tableData = res.data.data.results
        this.totalCount = res.data.data.total_count
      }).catch(err => {
        console.log(err)
      })
    },
    async commentStatusFn (row) {
      this.isDisabled = true
      await this.$axios({
        method: 'put',
        url: '/mp/v1_0/comments/status',
        params: { article_id: row.id.toString() },
        data: { allow_comment: row.comment_status }
      }).then(res => {
        this.$message.success('操作成功')
        console.log(row.comment_status)
        this.isDisabled = false
      }).catch(err => { console.log(err) })
    },
    async pageFn (num) {
      this.isDisabled = true
      await this.commentFn(num)
      this.isDisabled = false
    }
  }
}
</script>

<style scoped>

</style>
